import React, { Component } from 'react'
import store, {actionCreator} from '../Store/index-old'

export default class Redux extends Component {
    constructor() {
        super();
        this.state = {
            age: 0,
            money: 0, // 余额
            num: '' // 本次充值的金额
        }
    }
    componentDidMount() {
        this.setState(store.getState())
        // subscribe 订阅 订阅state的变化，每当数据更新时这个函数都会执行，subscribe只需要写一次
        this.fn1 = store.subscribe(() => {
            // getState返回一个对象  setState需要一个对象
            this.setState(store.getState())
        })
    }
    componentWillUnmount() {
        // 离开页面时需要取消订阅
        this.fn1();
    }
    add() {
        // 分发页面的变化，引起reducer的执行，dispatch的参数会被reducer接受作为第二个参数
        // dispatch分发的是action action是一个普通的js对象 必须有type
        // redux中的action = vuex中的action+mutation
        // actionCreator 是一个对象 里面有个方法叫ageAdd 他会返回一个对象作为action 放在dispatch中
        store.dispatch(actionCreator.ageAdd())
    }
    getMoney(e) {
        console.log(e.target.value);
        this.setState({
            num: e.target.value
        })
    }
    recharge() {
        // console.log(this.state.num);
        store.dispatch(actionCreator.recharge(this.state.num*1))
    }
    render() {
        return (
            <div>
                <p>Redux</p>
                <p>{this.state.age}</p>
                <button onClick={()=>this.add()}>年龄+1</button>
                <br/>
                <h1>余额:{this.state.money}</h1>
                <input value={this.state.num} onChange={(e)=>this.getMoney(e)}></input>
                <button onClick={()=>this.recharge()}>充满</button>
            </div>
        )
    }
}
